<!DOCTYPE html>
<html lang="en">
<head>
    <title>餐品详情</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

    <link rel="stylesheet" type="text/css" href="asserts/plugins/bootstrap/css/bootstrap.css">
    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script src="https://at.alicdn.com/t/font_2572187_fzxgixfnde.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <style>
        /*div{
            border: black solid 1px;
        }*/
        #button_addFood {
            margin-left: 80px;
            margin-top: 30px;
        }

        .pop {
            position: fixed;
            min-width: 50%;
            min-height: 50%;
            margin-left: 25%;
            margin-top: 10%;
            background-color: white;
            color: black;
            z-index: 3;
            border-radius: 5px;
        }

        .cover {
            background-color: black;
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.5;
            z-index: 2;
        }

        #center-body {
            margin: 40px;
        }

        #addImg {
            margin-left: 200px;
            width: 20%;
            height: 20%;
        }

        img {
            width: 50px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">

        /*删除点击事件*/
        function btn(fooId, categoryId, shopId) {
            $.ajax({
                url: "/catering-system-admin/food/deleteFood",
                async: true,
                type: "get",
                data: {
                    foodId: fooId
                },
                dataType: "json",
                success: function (respData) {
                    if (respData.code == 200) {
                        alert("删除成功!");
                        location.href = "admin_food.html?categoryId=" + categoryId + "&shopId=" + shopId;
                    }
                }
            })
        }

        /*初始化加载信息*/
        $(function () {
            $("#pop").hide()
            $("#cover").hide()

            console.log(location.href);
            var temp1 = location.href.split('&')[0];
            var temp2 = location.href.split('&')[1];
            var categoryId = temp1.split('=')[1];
            var shopId = temp2.split('=')[1];
            console.log(categoryId);
            console.log(shopId);

            $.ajax({
                url: "/catering-system-admin/food/getFoodsByCategoryId",
                async: true,
                type: "get",
                data: {
                    categoryId: categoryId
                },
                dataType: "json",
                success: function (respData) {
                    jQuery.each(respData.data, function (i, food) {
                        var temp = "<tr>\n" +
                            "            <td>" + food.foodId + "</td>\n" +
                            "            <td>" + food.foodName + "</td>\n" +
                            "            <td>" + food.foodPrice + "</td>\n" +
                            "            <td><img src=\"imgs/" + food.foodUrl + "\" id='img'></td>\n" +
                            "            <td>" + food.foodDesc + "</td>\n" +
                            "            <td><a href=\"javascript:void (0)\" onclick=\"btn(" + food.foodId + ',' + food.categoryId + ',' + food.shopId + ")\"><span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span> 删除餐品</a></td>\n" +
                            "       </tr>"
                        $("#tbody").append(temp);
                    })
                }
            })

            $("#button_addFood").click(function () {
                $("#pop").show()
                $("#cover").show()
            })
            $("#cover").click(function () {
                $("#pop").hide()
                $("#cover").hide()
            })

            $("#submit_addFood").click(function () {
                var formData = new FormData;
                formData.append("foodName", $("#name").val());
                formData.append("foodPrice", $("#price").val());
                formData.append("foodDesc", $("#desc").val());
                formData.append("categoryId", categoryId);
                formData.append("shopId", shopId);
                formData.append("file", $("#file")[0].files[0]);
                $.ajax({
                    url: "/catering-system-admin/food/addFood",
                    async: true,
                    type: "post",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (respData) {
                        if (respData.code == 200) {
                            alert("添加成功");
                            location.href = "admin_food.html?categoryId=" + categoryId + "&shopId=" + shopId;
                        }
                    }
                })
            })

        })
    </script>
</head>
<body>
<div class="container-fluid">

    <div class="pop" id="pop">
        <div id="center-body">
            <form>
                <div class="form-group">
                    <label>餐品名称:</label>
                    <input type="text" class="form-control" name="name" id="name">
                </div>
                <div class="form-group">
                    <label>餐品价格:</label>
                    <input type="text" class="form-control" name="price" id="price">
                </div>
                <div class="form-group">
                    <label>餐品描述:</label>
                    <input type="text" class="form-control" name="desc" id="desc">
                </div>
                <div class="form-group">
                    <label>餐品图片:</label>
                    <input type="file" id="file" name="file">
                </div>
                <button class="btn btn-primary btn btn-default" id="submit_addFood">Submit</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-10"><h1>餐品管理</h1></div>
        <div class="col-md-2">
            <button class="btn btn-default" type="button" id="button_addFood"><span class="glyphicon glyphicon-plus"
                                                                                    aria-hidden="true">添加餐品</span>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered" id="table">
                <thead>
                <tr class="bg-success">
                    <th>id</th>
                    <th>餐品名称</th>
                    <th>价格</th>
                    <th>图片</th>
                    <th>描述</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody id="tbody">
                <!--待添加数据-->
                </tbody>
                <tfoot>

                </tfoot>
            </table>
        </div>
    </div>

    <div class="cover" id="cover"></div>

</div>
</body>
<script>

</script>

</html>